<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" href="/themes/images/cropped-avatar-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="/themes/images/cropped-avatar-180x180.png" />
    <meta name="msapplication-TileImage" content="/themes/images/cropped-avatar-270x270.png" />
    <title>登录 - 权限管理系统 V1.0</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <link rel="icon" href="/themes/images/cropped-avatar-180x180.png">
    <style>
        /* login */

        .login-body {
            /* background: url("../image/bg.png") repeat fixed; */
        }

        .login-box {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 320px;
            height: 320px;
            max-height: 300px;
        }

        .login-body .login-box h3 {
            color: #444;
            font-size: 28px;
            font-weight: 100;
            text-align: center;
        }

        .login-box .layui-input[type='number'] {
            display: inline-block;
            /* width: 50%; */
            vertical-align: top;
            padding-right: 80px;
        }

        .login-box img {
            display: inline-block;
            width: 43%;
            height: 35px;
            border: none;
            vertical-align: top;
            cursor: pointer;
            margin-left: 4%;
            position: absolute;
            left: 100px;
            top: 1px;
        }

        .login-box button.btn-reset {
            /* width: 95px; */
            width: 143px;
        }

        .login-box button.btn-submit {
            /* width: 190px; */
            width: 142px;
        }

        .login-main {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 350px;
            margin: 0 auto;
        }

        .login-main header {
            margin-top: 150px;
            height: 35px;
            line-height: 35px;
            font-size: 30px;
            font-weight: 100;
            text-align: center;
        }

        .login-main header,
        .login-main form,
        .login-main form .layui-input-inline {
            margin-bottom: 15px;
        }

        .login-main form .layui-input-inline,
        .login-main form .layui-input-inline input,
        .login-main form .layui-input-inline button {
            width: 100%;
        }

        .login-main form .login-btn {
            margin-bottom: 5px;
        }
    </style>
</head>

<body class="login-body body">

    <div class="login-box">
        <form class="layui-form layui-form-pane" method="get" action="">
            <div class="layui-form-item">
                <h3>权限管理系统登录</h3>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号：</label>

                <div class="layui-input-inline">
                    <input type="text" name="UserName" class="layui-input" lay-verify="UserName" placeholder="账号" autocomplete="on" maxlength="20"
                    />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>

                <div class="layui-input-inline">
                    <input type="password" name="Password" class="layui-input" lay-verify="Password" placeholder="密码" maxlength="20" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码：</label>

                <div class="layui-input-inline">
                    <input type="text" name="Verify" class="layui-input" lay-verify="Verify" placeholder="验证码" maxlength="4" />
                    <img  id="captcha_img" src="/Admin/Account/Code" alt="">
                </div>
            </div>
            <div class="layui-form-item">
                <button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
                <button type="button" class="layui-btn btn-submit" lay-submit="" lay-filter="sub">登录</button>
            </div>
        </form>
    </div>

    <script type="text/javascript" src="/plugins/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['jquery', 'form', 'layer'], function () {

            // 操作对象
            var form = layui.form
                , layer = layui.layer
                , $ = layui.jquery;

            // 验证
            form.verify({
                UserName: function (value) {
                    if (value == "") {
                        return "请输入用户名";
                    }
                },
                Password: function (value) {
                    if (value == "") {
                        return "请输入密码";
                    }
                },
                Verify: function (value) {
                    if (value == "") {
                        return "请输入验证码";
                    }
                }
            });

            // 提交监听
            form.on('submit(sub)', function (data) {
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // });
                //var url = "/Admin/Account/LoginDo";
                //var submitData = {UserName: layui.$("#UserName").val(),Password: layui.$("#Password").val(),Verify: layui.$("#Verify").val()};
                layui.$.ajax({
                    url: "/Admin/Account/LoginDo",
                    type: 'post',
                    data: data.field,
                    success: function (data, textStatus) {
                        if (textStatus == 'success') {
                            console.log(data);
                            layer.msg(data.Message);
                            if (data.Result == true) {
                                window.location.href = "@ViewBag.returnUrl";
                            }
                        }
                    }
                })
                return false;
            });
            $("#captcha_img").click(function (e) {
                var timenow = new Date().getTime();
                $("#captcha_img").attr("src", '/Admin/Account/Code?v=' + timenow);
                //layer.msg("验证码");
            });
            // you code ...
        })
    </script>
</body>

</html>